function stream_() {

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
                audio: true
            })
            .then((stream) => {
                let AudioContext = window.AudioContext || window.webkitAudioContext;
                let audioContext = new AudioContext();
                let analyser = audioContext.createAnalyser();
                // analyser.fftSize = 256;
                // analyser = audioContext.createAnalyser();

                let audio = document.getElementById('audio');
                let audioSrc = audioContext.createMediaStreamSource(stream); //创建一个新的 关联 对象

                // let audioSrc = audioContext.createMediaElementSource(audio);
                audioSrc.connect(analyser);
                analyser.connect(audioContext.destination);

                let canvas = document.getElementById('canvas');

                let ctx = canvas.getContext("2d");
                ctx.lineWidth = 2;
                let grd = ctx.createLinearGradient(0, 0, 600, 0);
                grd.addColorStop(0, "#00d0ff");
                grd.addColorStop(1, "#eee");

                let grd2 = ctx.createLinearGradient(0, 0, 600, 0);
                grd2.addColorStop(0, "#fff");
                grd2.addColorStop(1, "#e720ee");
                let het = 0;

                var globalID;

                function render() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    let dataArray = new Uint8Array(analyser.frequencyBinCount);
                    analyser.getByteFrequencyData(dataArray);
                    ctx.beginPath();
                    for (let i = 0; i < 200; i++) {
                        let value = dataArray[6 * i];
                        ctx.fillStyle = grd;
                        ctx.fillRect(i * 5, 300, 2, -value + 1);
                        ctx.fillRect(i * 5, 280 - value, 2, het);
                        ctx.fillStyle = grd2;
                        ctx.fillRect(i * 5, 300, 2, value + 1);
                        ctx.fillRect(i * 5, 320 + value, 2, het);
                    }
                    globalID = requestAnimationFrame(render);
                };
                globalID = requestAnimationFrame(render);



            })
            .catch(function(err) {
                console.error("授权失败！");
            });
    } else {
        console.error("浏览器不支持 getUserMedia");
    }
}

var fileChange = document.getElementById('fileChooser');
fileChange.onchange = fileChange = (e) => {
    if (e.target.files[0]) {
        let playfile = URL.createObjectURL(e.target.files[0]);
        audio.src = playfile;
        let musicName = e.target.files[0].name.split('.')[0];
        audio.play();
        _audio()
    }
};

// ------------------------------------------------------------------------------------------------------------------------------------------------
function _audio() {
    let AudioContext = window.AudioContext || window.webkitAudioContext;
    let audioContext = new AudioContext();
    let analyser = audioContext.createAnalyser();
    analyser.fftSize = 256;
    // analyser = audioContext.createAnalyser();

    let audio = document.getElementById('audio');
    let audioSrc = audioContext.createMediaElementSource(audio);
    audioSrc.connect(analyser);
    analyser.connect(audioContext.destination);
    let canvas = document.getElementById('canvas');

    let ctx = canvas.getContext("2d");
    ctx.lineWidth = 2;
    let grd = ctx.createLinearGradient(0, 0, 600, 0);
    grd.addColorStop(0, "#00d0ff");
    grd.addColorStop(1, "#eee");

    let grd2 = ctx.createLinearGradient(0, 0, 600, 0);
    grd2.addColorStop(0, "#fff");
    grd2.addColorStop(1, "#e720ee");
    let het = 0;

    var globalID;

    function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        let dataArray = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(dataArray);
        ctx.beginPath();
        for (let i = 0; i < 200; i++) {
            let value = dataArray[6 * i];
            ctx.fillStyle = grd;
            ctx.fillRect(i * 5, 300, 2, -value + 1);
            ctx.fillRect(i * 5, 280 - value, 2, het);
            ctx.fillStyle = grd2;
            ctx.fillRect(i * 5, 300, 2, value + 1);
            ctx.fillRect(i * 5, 320 + value, 2, het);
        }
        globalID = requestAnimationFrame(render);
    };
    globalID = requestAnimationFrame(render);
}

function _play() {
    document.getElementById('audio').play()
}


function stream_range() {

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
                audio: true
            })
            .then((stream) => {
                let AudioContext = window.AudioContext || window.webkitAudioContext;
                let audioContext = new AudioContext();
                let analyser = audioContext.createAnalyser();
                analyser.fftSize = 256;
                // analyser = audioContext.createAnalyser();
                // var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

                //set up the different audio nodes we will use for the app
                // var analyser = audioContext.createAnalyser();
                var distortion = audioContext.createWaveShaper();
                var gainNode = audioContext.createGain();
                var biquadFilter = audioContext.createBiquadFilter();
                var convolver = audioContext.createConvolver();

                source = audioContext.createMediaStreamSource(stream);
                source.connect(analyser);
                analyser.connect(distortion);
                distortion.connect(biquadFilter);
                biquadFilter.connect(convolver);
                convolver.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                biquadFilter.type = "lowshelf";
                biquadFilter.frequency.value = 1000;
                biquadFilter.gain.value = 25;


                let audio = document.getElementById('audio');
                // Create a MediaStreamAudioSourceNode
                // Feed the HTMLMediaElement into it
                // var audioContext = new AudioContext();
                var range = document.querySelector('#range');
                // var source = audioContext.createMediaStreamSource(stream);
                // Create a biquadfilter
         /*       var biquadFilter = audioContext.createBiquadFilter();
                biquadFilter.type = "lowshelf";
                biquadFilter.frequency.value = 1000;
                biquadFilter.gain.value = range.value;*/
                // connect the AudioBufferSourceNode to the gainNode
                // and the gainNode to the destination, so we can play the
                // music and adjust the volume using the mouse cursor
                // source.connect(biquadFilter);
                // biquadFilter.connect(audioContext.destination);
                // source.connect(analyser);
                // analyser.connect(audioContext.destination);

                // Get new mouse pointer coordinates when mouse is moved
                // then set new gain value
                range.oninput = function() {
                    biquadFilter.gain.value = range.value;
                }
                
                let canvas = document.getElementById('canvas');

                let ctx = canvas.getContext("2d");
                ctx.lineWidth = 2;
                let grd = ctx.createLinearGradient(0, 0, 600, 0);
                grd.addColorStop(0, "#00d0ff");
                grd.addColorStop(1, "#eee");

                let grd2 = ctx.createLinearGradient(0, 0, 600, 0);
                grd2.addColorStop(0, "#fff");
                grd2.addColorStop(1, "#e720ee");
                let het = 0;

                var globalID;

                function render() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    let dataArray = new Uint8Array(analyser.frequencyBinCount);
                    analyser.getByteFrequencyData(dataArray);
                    ctx.beginPath();
                    for (let i = 0; i < 200; i++) {
                        let value = dataArray[6 * i];
                        ctx.fillStyle = grd;
                        ctx.fillRect(i * 5, 300, 2, -value + 1);
                        ctx.fillRect(i * 5, 280 - value, 2, het);
                        ctx.fillStyle = grd2;
                        ctx.fillRect(i * 5, 300, 2, value + 1);
                        ctx.fillRect(i * 5, 320 + value, 2, het);
                    }
                    globalID = requestAnimationFrame(render);
                };
                globalID = requestAnimationFrame(render);



            })
            .catch(function(err) {
                console.error("授权失败！",err);
            });
    } else {
        console.error("浏览器不支持 getUserMedia");
    }
}